<script setup>
import { ref, computed, watch, reactive, watchEffect } from "vue";

const firstName = ref('张')
const lastName = ref('辉')
// computed() 方法期望接收一个 getter 函数，返回值为一个计算属性 ref。
// const fullName = computed(() => {
//   return firstName.value + lastName.value
// })

// 可写计算属性
const fullName = computed({
  get() {
    return firstName.value + '-' + lastName.value
  },
  set(newVal) {
    [firstName.value, lastName.value] = newVal.split('-')
  }
})
console.log(fullName.value);
setTimeout(() => {
  fullName.value = '吴-鹏'
  // console.log(fullName.value, firstName.value);
}, 1000)

const x = ref(0)
const y = ref(0)
const obj = reactive({count: 0})
const a = reactive({b: { c: 1 }})
setTimeout(() => {
  x.value = 1
  y.value = 2
  obj.count = 3
  a.b.c = 4
}, 1000)
// 监听单个值
// watch(x, (val)=>{
//   console.log('x变化后的值', val);
// })

// 监听多个值
// watch([x, y], ([newX, newY])=>{
//   console.log('x,y变化后的值', newX, newY);
// })

// 监听对象的属性
// watch(() => obj.count, (val)=>{
//   console.log('obj变化后的值', val);
// })

// 深层监听
/* 
 * 如果只是监听对象的话，默认开启了深度监听
 * 如果是监听的对象属性，该属性也是对象类型的数据，需要开启deep
 */
// 立即执行 immediate
// watch(()=>a.b, (val)=>{
//   console.log('变化后', val.c);
// },{ deep: true, immediate: true })

// watchEffect
watchEffect(() => {
  console.log(obj, x.value);
})

/* 
watch和watchEffect区别：
1. watch只监听明确的数据源，而watchEffect监听内部用到的数据。
2. watchEffect相当于watch增加了immediate立即执行的属性，会立刻监听。
3. watchEffect更像computed，但是computed注重的是返回值，而watchEffect更注重过程，没有返回值。
*/
</script>

<template>
</template>

<style></style>
